<template>
  <div class="detail-info-panel">
    <!-- 返回按钮 -->
    <el-button type="primary" plain size="small" @click="backToWorkbench" class="back-button">
      <el-icon><ArrowLeft /></el-icon>
      返回概览
    </el-button>

    <!-- 工作台 -->
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">工作台</span>
        </div>
      </template>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="状态">{{ workbench.status }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 对中 -->
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">对中</span>
        </div>
      </template>
      <el-descriptions :column="1" border>
        <el-descriptions-item label="前轮">{{ align.front }}</el-descriptions-item>
        <el-descriptions-item label="后轮">{{ align.back }}</el-descriptions-item>
      </el-descriptions>
    </el-card>

    <!-- 对中控制 -->
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">对中控制</span>
        </div>
      </template>
      <el-table :data="alignControl" border style="width: 100%" stripe>
        <el-table-column prop="frontX" label="前轮X轴" />
        <el-table-column prop="backX" label="后轮X轴" />
        <el-table-column prop="initPos" label="初始点位置" />
        <el-table-column prop="max" label="当前最大限值" />
        <el-table-column prop="min" label="当前最小限值" />
        <el-table-column prop="current" label="当前位置" />
        <el-table-column prop="speed" label="当前速度" />
        <el-table-column label="伺服报警" width="100">
          <template #default="scope">
            <el-tag
              :type="scope.row.alarm === 'red' ? 'danger' : scope.row.alarm === 'gray' ? 'info' : ''"
              :effect="scope.row.alarm ? 'dark' : 'plain'"
              class="status-tag"
            >
              {{ scope.row.alarm === 'red' ? '报警' : scope.row.alarm === 'gray' ? '离线' : '正常' }}
            </el-tag>
          </template>
        </el-table-column>
      </el-table>
    </el-card>

    <!-- ACC -->
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">ACC</span>
        </div>
      </template>
      <el-table :data="acc" border style="width: 100%" stripe>
        <el-table-column prop="x" label="X轴" />
        <el-table-column prop="y" label="Y轴" />
        <el-table-column prop="z" label="Z轴" />
        <el-table-column prop="r" label="R轴" />
      </el-table>
    </el-card>

    <!-- ACCBack -->
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">ACCBack</span>
        </div>
      </template>
      <el-table :data="accBack" border style="width: 100%" stripe>
        <el-table-column prop="x" label="X轴" />
        <el-table-column prop="y" label="Y轴" />
        <el-table-column prop="z" label="Z轴" />
        <el-table-column prop="r" label="R轴" />
      </el-table>
    </el-card>

    <!-- ACCAngle -->
    <el-card class="info-card">
      <template #header>
        <div class="card-header">
          <span class="card-title">ACCAngle</span>
        </div>
      </template>
      <el-table :data="accAngle" border style="width: 100%" stripe>
        <el-table-column prop="x" label="左角雷达X轴" />
        <el-table-column prop="y" label="左角雷达Y轴" />
        <el-table-column prop="z" label="左角雷达Z轴" />
      </el-table>
    </el-card>
  </div>
</template>

<script setup lang="ts">
import { ref, onMounted } from 'vue'
import { useRouter } from 'vue-router'
import { ArrowLeft } from '@element-plus/icons-vue'
import 'element-plus/dist/index.css'

const router = useRouter()

onMounted(() => {
  console.log('mounted')
})

const backToWorkbench = (): void => {
  router.back()
}
// mock 数据
const workbench = ref({ status: '状态' })
const align = ref({ front: '前轮', back: '后轮' })
const alignControl = ref([
  { id: 1, frontX: '1.010', backX: '11.010', initPos: '-', max: '-', min: '-', current: '-', speed: '-', alarm: 'red' },
  { id: 2, frontX: '-5000.001', backX: '5000.002', initPos: '-', max: '-', min: '-', current: '-', speed: '-', alarm: 'gray' },
  { id: 3, frontX: '-5000.001', backX: '-5000.002', initPos: '-', max: '-', min: '-', current: '-', speed: '-', alarm: 'gray' },
  { id: 4, frontX: '3.010', backX: '13.010', initPos: '-', max: '-', min: '-', current: '-', speed: '-', alarm: '' },
  { id: 5, frontX: '4.010', backX: '14.010', initPos: '-', max: '-', min: '-', current: '-', speed: '-', alarm: '' }
])
const acc = ref([
  { id: 1, x: '21.010', y: '31.010', z: '41.010', r: '51.010' },
  { id: 2, x: '5000.003', y: '5000.004', z: '5000.005', r: '5000.006' },
  { id: 3, x: '-5000.003', y: '-5000.004', z: '-5000.005', r: '-5000.006' },
  { id: 4, x: '23.010', y: '33.010', z: '43.010', r: '53.010' },
  { id: 5, x: '24.010', y: '34.010', z: '44.010', r: '54.010' }
])
const accBack = ref([
  { id: 1, x: '21.010', y: '31.010', z: '41.010', r: '51.010' },
  { id: 2, x: '5000.003', y: '5000.004', z: '5000.005', r: '5000.006' },
  { id: 3, x: '-5000.003', y: '-5000.004', z: '-5000.005', r: '-5000.006' },
  { id: 4, x: '23.010', y: '33.010', z: '43.010', r: '53.010' },
  { id: 5, x: '24.010', y: '34.010', z: '44.010', r: '54.010' }
])
const accAngle = ref([
  { id: 1, x: '21.010', y: '31.010', z: '41.010' },
  { id: 2, x: '5000.027', y: '5000.028', z: '5000.029' },
  { id: 3, x: '-5000.027', y: '-5000.028', z: '-5000.029' },
  { id: 4, x: '23.010', y: '33.010', z: '43.010' },
  { id: 5, x: '24.010', y: '34.010', z: '44.010' }
])
</script>

<style scoped>
.detail-info-panel {
  background: #f5f6fa;
  padding: 16px;
}

.back-button {
  margin-bottom: 16px;
}

.info-card {
  margin-bottom: 16px;
}

.card-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.card-title {
  font-weight: 600;
  font-size: 16px;
  color: #2b4a6f;
}

.status-tag {
  margin: 0;
  transform: scale(0.9);
}

:deep(.el-card__header) {
  padding: 12px 16px;
  border-bottom: 1px solid #e4e7ed;
}

:deep(.el-card__body) {
  padding: 16px;
}

:deep(.el-descriptions) {
  margin-bottom: 0;
}

:deep(.el-descriptions__cell) {
  padding: 12px 16px;
}

:deep(.el-table th) {
  background-color: #f5f7fa;
  color: #2b4a6f;
  font-weight: 600;
}
</style>
